// deprecated
<template>
  <el-dialog
    v-model="dialogVisible"
    :title="dialogTitle"
    width="36%"
    @close="onClose"
  >
    <el-form
      :model="formData"
      label-width="auto"
      style="max-width: 68%;margin: 0 auto;"
      ref="formDataRef"
    >
      <el-form-item
        label="角色名称:"
        prop="name"
        required
      >
        <el-input
          :disabled="formMode === FormMode.Edit"
          clearable
          v-model="formData.name"
        />
      </el-form-item>
      <el-form-item
        label="角色描述:"
        prop="description"
      >
        <el-input
          clearable
          v-model="formData.description"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button
          type="primary"
          @click="onSubmit"
        >
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { reactive, ref, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
import { FormMode, FormTitleByMode } from '@/common/type/baseEnum'
import type { RoleData } from '@/common/type/data'
import { isResultSuccess } from '@/util/http'
import Logger from '@/util/log'
import { addRoleInfo, editRoleInfo } from '@/api/usermgr'

const dialogTitle = ref('')
const formDataRef = ref()
// 表单内容
const formData = reactive({} as RoleData)
// 表单模式，note：初始化形式
const formMode = ref<FormMode>(FormMode.Add)

const dialogVisible = ref(false)
const open = (m: FormMode, data?: RoleData) => {
  formMode.value = m // 修改为响应式赋值
  dialogTitle.value = FormTitleByMode[m]
  // 表单数据填充
  if (data) {
    // note: 这里的nextTick是为了保证表单数据填充的正确性
    nextTick(() => {
      Object.assign(formData, data)
    })
  }
  // 打开表单
  dialogVisible.value = true
}

// 表单操作
const onClose = () => {
  formDataRef.value.resetFields()
}

const fs = new Map([
  [FormMode.Add, addRoleInfo],
  [FormMode.Edit, editRoleInfo]
])

const onSubmit = () => {
  formDataRef.value.validate(async (valid: boolean, fields: any) => {
    if (valid) {
      let success = false, errMsg: any
      Logger.prettyInfo('submit start!', formData)
      const f = fs.get(formMode.value)
      if (!f) {
        ElMessage({
          message: '表单模式错误！',
          type: 'error',
          duration: 1500
        })
        return false
      }

      try {
        const res = await f(formData)
        success = isResultSuccess(res)
        errMsg = res.msg
      } catch (error) {
        errMsg = error
        Logger.prettyError('role info op catch error', error.response.data)
      }
      // 关闭表单，无论成功与否
      dialogVisible.value = false

      if (!success) {
        ElMessage({
          message: dialogTitle.value + '角色失败！' + errMsg,
          type: 'error',
          duration: 1500
        })
        return false
      }
      ElMessage({
        message: dialogTitle.value + '角色成功！',
        type: 'success',
        duration: 1500
      })
      // 刷新表格数据
      emit('success') // 添加事件触发 <mcreference link="https://vuejs.org/guide/components/events.html" index="1">1</mcreference>
      return true
    } else {
      console.log('error submit!!', fields)
      return false
    }
  })
}
// note：注意这里的父子显示传递
defineExpose({
  open
})

// 在setup顶部添加emit声明
const emit = defineEmits(['success'])

</script>
